
<template>
  <div class="app-container home">
    <el-card class="box-card">
      <!-- 搜索 -->
        <el-form :model="queryParams" ref="queryParams" :inline="true">
            <el-form-item label="名称" prop="status">
                  <el-input placeholder="请输入内容" v-model="input"  clearable></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="submitForm()">查询</el-button>
              <el-button type="primary" icon="el-icon-circle-plus" @click="handleAddRole">新增</el-button>
            </el-form-item>
        </el-form>

        <el-table :data="perList" size="small" border>
          <el-table-column  label="权限ID" align="center" fixed="left" prop="shopName">
            <template slot-scope="scope">
               {{ scope.row.id }}
            </template>
          </el-table-column>
          <el-table-column  label="权限名称" align="center" >
            <template slot-scope="scope">
               {{ scope.row.permissionName }}
            </template>
          </el-table-column>
          <el-table-column  label="资源路径" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
               {{ scope.row.resource }}
            </template>
          </el-table-column>
          <el-table-column  label="权限标记" align="center" >
            <template slot-scope="scope">
               {{ scope.row.sn }}
            </template>
          </el-table-column>
    
          <el-table-column  label="操作" width="100" align="center" fixed="right" >
            <template slot-scope="scope">
              <el-button type="text" plain  @click="handleEdit(scope)" >编辑</el-button>
                  <el-button type="text" plain  @click="handleDelete(scope)">删除</el-button>
            </template>  
          </el-table-column>
        </el-table>
    </el-card>

    <el-dialog :visible.sync="dialogVisible" :title="dialogType==='edit'?'编辑权限':'新增角色'">
      <el-form :model="permission" label-width="80px" label-position="left">
        <el-form-item label="名称">
          <el-input v-model="permission.permissionName" placeholder="权限名称"  />
        </el-form-item>
        <el-form-item label="资源路径">
          <el-input
            v-model="permission.resource"
            :autosize="{ minRows: 2, maxRows: 4}"
            type="textarea"
            placeholder="资源路径"
           
          />
        </el-form-item>
        <el-form-item label="权限标志">
          <el-input
            v-model="permission.sn"
            :autosize="{ minRows: 2, maxRows: 4}"
            type="textarea"
            placeholder="权限标志"
           
          />
        </el-form-item>
      </el-form>
      <div style="text-align:right;">
        <el-button type="danger" @click="dialogVisible=false">关闭</el-button>
        <el-button type="primary" @click="confirmRole()">提交</el-button>
      </div>
    </el-dialog>
    
  </div>
</template>

<script>
import { deepClone } from '@/utils'
import {  getPermissions,queryByname,updatePer,deletePer,addPer} from '@/api/permission'

const defaultPer = {
  id: '',
  permissionName: '',
  resource: '',
  sn: ''
}

export default {
  name: "tableRow",
  data() {
    return {
      dialogVisible:false,
      shopLoading: false,
      dialogType:'new',
      perList: [],
      input:"",
      permission:Object.assign({}, defaultPer),
    };
  },
  created() {
    
    this.getPerList()
    
  },
  methods: {
  
    /**分页 */

    async getPerList() {
         const res= await getPermissions()
         this.perList=res.data
         console.info("--------"+res)
    },  

    /** 搜索按钮操作 */
    async  submitForm(formName) { 
          // if(this.input!==null && this.input!==""){
            const res=  await queryByname(this.input)
            this.perList=res.data
          // }
    },
    handleEdit(scope){
      this.dialogType = 'edit'
      this.dialogVisible = true
      this.permission = deepClone(scope.row)
    },
    handleDelete({$index, row}){
     
      this.$confirm('确定是否要删除改角色?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '关闭',
        type: 'warning'
      })
        .then(async() => {
          await deletePer(row.id)
          
          this.perList.splice($index, 1)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(err => { console.error(err) })
    },
    handleAddRole() {
      this.permission = Object.assign({}, defaultPer)
      // if (this.$refs.tree) {
      //   this.$refs.tree.setCheckedNodes([])
      // }
      this.dialogType = 'new'
      this.dialogVisible = true
    },
    async confirmRole() {
      const isEdit = this.dialogType === 'edit'
      if (isEdit) {
        await updatePer(this.permission.id, this.permission)
        for (let index = 0; index < this.perList.length; index++) {
          if (this.perList[index].id === this.permission.id) {
            this.perList.splice(index, 1, Object.assign({}, this.permission))
            break
          }
        }
      } else {
        const { data } = await addPer(this.permission)
        console.info(data)
        this.permission.id = data
        this.perList.push(this.permission)
      }

      const { id,permissionName,resource, sn } = this.permission
      this.dialogVisible = false
      this.$notify({
        title: 'Success',
        dangerouslyUseHTMLString: true,
        message: `
            <div>Permission Key: ${id}</div>
            <div>Permission Name: ${permissionName}</div>
            <div>Resource: ${resource}</div>
            <div>sn: ${sn}</div>
          `,
        type: 'success'
      })
    },
  }
};
</script>

<style scoped lang="scss">
.preview-image {
  width: 50px;
  height: 50px;
  margin: 0 3px;
}


</style>


